<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
        	<div class="layui-card-body">
            <!-- 表格工具栏 -->
            <div class="layui-form toolbar">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label w-auto">搜索:</label>
                        <div class="layui-input-inline">
                            <input name="keyword" class="layui-input" placeholder="输入关键字"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn icon-btn" lay-filter="cabTbSearch" lay-submit>
                            <i class="layui-icon">&#xe615;</i>搜索
                        </button>
                        <button id="btnAddCab" class="layui-btn icon-btn" type="button">
                            <i class="layui-icon">&#xe654;</i>新增
                        </button>
                    </div>
                </div>
            </div>
            <div class="layui-tab-item layui-show" style="padding-top: 15px;">
                <div class="layui-row layui-col-space30" id="demoGrid3"></div>
            </div>
        </div>
    </div>
</div>

<!-- 应用模板 -->
<script type="text/html" id="demoGridItem3">
    <div class="layui-col-md3">
        <div class="application-list-item">
            <div class="application-list-item-header">
                <h2>{{d.NAME}}</h2>
            </div>
            <div class="application-list-item-body">
                <div class="text-num-item">
                    <div class="text-num-item-title">总容量</div>
                    <div class="text-num-item-text">
                        {{d.totalNum}}
                    </div>
                </div>
                <div class="text-num-item">
                    <div class="text-num-item-title">故障</div>
                    <div class="text-num-item-text">{{d.faultNum}}</div>
                </div>

                <div class="text-num-item">
                    <div class="text-num-item-title">占用</div>
                    <div class="text-num-item-text">{{d.usedNum}}</div>
                </div>
                <div class="text-num-item">
                    <div class="text-num-item-title">空闲</div>
                    <div class="text-num-item-text">{{d.freeNum}}</div>
                </div>
            </div>
            <div class="application-list-item-tool">
				<!--<span class="application-list-item-tool-item" lay-event="edit">
                    <i class="layui-icon layui-icon-edit" lay-tips="编辑" lay-offset="0,-8px"></i>
                </span>-->
				<span class="application-list-item-tool-item" lay-event="delete">
                    <i class="layui-icon layui-icon-delete" lay-tips="删除" lay-offset="0,-8px"></i>
                </span>
                <span class="application-list-item-tool-item" lay-event="addModule">
                    <i class="layui-icon layui-icon-templeate-1" lay-tips="柜子组" lay-offset="0,-8px"></i>
                </span>
				<span class="application-list-item-tool-item" lay-event="config">
                    <i class="layui-icon layui-icon-set-sm" lay-tips="参数配置" lay-offset="0,-8px"></i>
                </span>
                <span class="application-list-item-tool-item" lay-event="addCard">
                    <i class="layui-icon layui-icon-list" lay-tips="显示标签" lay-offset="0,-8px"></i>
                </span>
				<span class="application-list-item-tool-item" lay-event="monitor">
                    <i class="layui-icon layui-icon-video" lay-tips="监控设备" lay-offset="0,-8px"></i>
                </span>
				<span class="application-list-item-tool-item" lay-event="picture">
                    <i class="layui-icon layui-icon-picture-fine" lay-tips="展示图片" lay-offset="0,-8px"></i>
                </span>
            </div>
        </div>
    </div>
</script>
<!-- 表单弹窗 -->
<script type="text/html" id="modelCabScript">
    <form id="modelCabForm" lay-filter="modelCabForm" class="layui-form model-form">
        <input name="id" type="hidden"/>
        <div class="layui-form-item">
            <label class="layui-form-label">授权</label>
            <div class="layui-input-block">
                <input name="license" placeholder="请输入授权" type="text" class="layui-input" maxlength="50"
                       lay-verType="tips" lay-verify="required" required/>
            </div>
        </div>
		<div class="layui-form-item">
            <label class="layui-form-label">单位</label>
            <div class="layui-input-block">
				<input id="orgId" type="text" name="orgId"   lay-filter="orgId" autocomplete="off" placeholder="请选择" value="" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
            <button class="layui-btn" lay-filter="modelSubmitCab" lay-submit>保存</button>
        </div>
    </form>
</script>

<script>
layui.extend({
    treeSelect: '/treeSelect/treeSelect'
}).use(['layer', 'dataGrid', 'admin', 'element', 'dropdown','treeSelect'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var dataGrid = layui.dataGrid;
        var admin = layui.admin;
        var element = layui.element;
        loadDataGrid();
        
        $('#btnAddCab').click(function () {
            showEditModel();
        });

        // 搜索
        form.on('submit(cabTbSearch)', function (data) {
            loadDataGrid(data.field);
        });
        
        function loadDataGrid(where){
        	layer.load(2);
	        var res = common_ajax.ajaxFunc('get','#(ctx)/biz/cab/listData', where, 'json', null);
	        layer.closeAll('loading');
	        if(0==res.code){
	        	dataGrid.render({
	                elem: '#demoGrid3',  // 容器
	                templet: '#demoGridItem3',  // 模板
	                data: res.data,  // url
	                page: {limit: 8, limits: [8, 16, 24, 32, 40]},  // 开启分页
	                onItemClick: function (obj) {  // item事件
	                    var index = obj.index + 1;
	                    //layer.msg('点击了第' + index + '个', {icon: 1});
	                },
	                onToolBarClick: function (obj) {  // toolBar事件
	                    var event = obj.event;
	                    var data = obj.data;
	                    if (event == 'addModule') {
	                        addModule(data.id);
	                    } else if (event == 'edit') {
	                       	showEditModel(data);
	                    } else if (event == 'delete') {
	                        doDel(obj);
	                    } else if (event == 'addCard') {
	                        addCard(data.id);
	                    } else if(event == 'picture'){
	                    	addPicture(data.id);
	                    }else if(event == 'config'){
	                    	addConfig(data.id);
	                    }
	                }
	            });
	        }
        }
        
        // 显示编辑弹窗
        function showEditModel(mCab) {
            admin.open({
                type: 1,
                title: (mCab ? '修改' : '添加'),
                content: $('#modelCabScript').html(),
                area:'400px',
                success: function (layero, dIndex) {
                    var url = 'biz/cab/save';
                    form.val('modelCabForm', mCab);
                    
                    treeSelect.render({
            	        elem: '#orgId',
            	        data: '#(ctx)/sys/org/selectTree',
            	        type: 'get',
            	        placeholder: '请选择',
            	        search: true,
            	        click: function(d){
            	        },
            	        success: function (d) {
            	        	if(mCab && mCab.orgId)
                        	treeSelect.checkNode('orgId', mCab.orgId);
            	        }
            	    });
                    
                    // 表单提交事件
                    form.on('submit(modelSubmitCab)', function (data) {
                        layer.load(2);
                        var formData={}; 
                        for(var key in data.field){
                        	formData['cab.'+key]=data.field[key];
                        }
                        admin.req(url, formData, function (res) {
                            layer.closeAll('loading');
                            if (res.code == 200) {
                                layer.close(dIndex);
                                layer.msg(res.message, {icon: 1});
                                loadDataGrid();
                            } else {
                                layer.msg(res.message, {icon: 2});
                            }
                        }, 'get');
                        return false;
                    });
                    
                }
            });
        }
        
        // 删除
        function doDel(obj) {
        	layer.confirm('确定要删除“【<span style="color:red;">' +obj.data.NAME+ '</span>】”吗？', {
                skin: 'layui-layer-admin',
                shade: .1
            }, function (i) {
                layer.close(i);
                layer.load(2);
                admin.req('biz/cab/delete', {
                    id: obj.data.id
                }, function (res) {
                    layer.closeAll('loading');
                    if (res.code == 200) {
                        layer.msg(res.message, {icon: 1});
                        obj.del();
                    } else {
                        layer.msg(res.message, {icon: 2});
                    }
                }, 'get');
            });
        }
        
        function addModule(cabId) {
        	layer.load(2);
        	var res = common_ajax.ajaxFunc('get','#(ctx)/biz/cab/module', {cabId:cabId}, 'html', null);
        	
        	layer.closeAll('loading');
			if (!res) {
				layer.alert('系统异常！');
				return;
			}
			
			layer.open({
				id: 'module',
				title: '柜子列表',
				type: 1,
				area: ['800px', '500px'],
				offset: '100px',
				content: res,
				shade: 0.1,
				skin: 'layui-layer layui-layer-adminRight layui-layer-city',
				success: function(layero, dIndex) {
					$(layero).children('.layui-layer-content').css('overflow', 'hidden');
				},
				end: function() {
					loadDataGrid();
				},
				cancel: function(index, layero){
					loadDataGrid();
				}
			});
			
        }
        
        function addCard(cabId) {
        	layer.load(2);
        	var res = common_ajax.ajaxFunc('get','#(ctx)/biz/cab/card', {cabId:cabId}, 'html', null);
        	
        	layer.closeAll('loading');
			if (!res) {
				layer.alert('系统异常！');
				return;
			}
			
			layer.open({
				id: 'module',
				title: '列表内容',
				type: 1,
				area: ['800px', '500px'],
				offset: '100px',
				content: res,
				shade: 0.1,
				skin: 'layui-layer layui-layer-adminRight layui-layer-city',
				success: function(layero, dIndex) {
					$(layero).children('.layui-layer-content').css('overflow', 'hidden');
				},
				end: function() {
				}
			});
			
			
        }
        
        function addPicture(cabId) {
        	layer.load(2);
        	var res = common_ajax.ajaxFunc('get','#(ctx)/biz/cab/picture', {cabId:cabId}, 'html', null);
        	
        	layer.closeAll('loading');
			if (!res) {
				layer.alert('系统异常！');
				return;
			}
			
			layer.open({
				id: 'picture',
				title: '图片列表',
				type: 1,
				area: ['800px', '500px'],
				offset: '100px',
				content: res,
				shade: 0.1,
				skin: 'layui-layer layui-layer-adminRight layui-layer-city',
				success: function(layero, dIndex) {
					$(layero).children('.layui-layer-content').css('overflow', 'hidden');
				},
				end: function() {
				}
			});
			
        }
        
        function addConfig(cabId) {
        	layer.load(2);
        	var res = common_ajax.ajaxFunc('get','#(ctx)/biz/cab/config', {cabId:cabId}, 'html', null);
        	
        	layer.closeAll('loading');
			if (!res) {
				layer.alert('系统异常！');
				return;
			}
			
			layer.open({
				id: 'picture',
				title: '参数配置',
				type: 1,
				area: ['500px', '350px'],
				offset: '100px',
				content: res,
				shade: 0.1,
				skin: 'layui-layer layui-layer-adminRight layui-layer-city',
				success: function(layero, dIndex) {
					$(layero).children('.layui-layer-content').css('overflow', 'hidden');
				},
				end: function() {
				}
			});
			
        }

    });
</script>